<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'
import EchartsMixins from '../echarts.mixins'

export default {
  mixins: [EchartsMixins],
  data() {
    return {
      textColor: '#00e6ff',
      charts: '',
      valueList: [],
      // 监测点名称
      monitorName: '',
    }
  },
  computed: {
    options() {
      const Echarts = require('echarts')
      return {
        holeDepth: 0,
        title: {
          text: this.monitorName +'地下水位曲线图',
          x: 'center',
          align: 'right',
          textStyle: {
            color: this.textColor
          }
        },
        legend: {
          data: ['水位值'],
          y: 'top',
          x: 'right',
          padding: [30, 20, 0, 0],
          // 设置为可滚动的图例
          type: 'scroll',
          textStyle: {
            color: this.textColor
          }
        },
        grid: {
          left: 40,
          right: 30,
          bottom: 20,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',

            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: function (params, ticket, callback) {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              if (i === 0) {
                contentArr.push(Format(new Date(data.value[0])))
              }
              contentArr.push(data.marker + data.seriesName + '水柱高度：' + data.value[1] + 'm')
            }
            return contentArr.join('<br/>')
          }
        },
        xAxis: {
          splitLine: {
            show: false
          },
          type: 'time',
          boundaryGap: false,
          axisLabel: { // 坐标轴标签样式设置
            formatter: function (value, index) { // 坐标轴文字展示样式处理
              const date = new Date(value)
              if (date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0) {
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              }
              return Echarts.format.formatTime('hh:mm:ss', new Date(value))
            },
            show: true,
            textStyle: {
              color: this.textColor
            },
          },
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        },
        yAxis: {
          max: this.holeDepth + this.holeDepth*0.2,
          name: '水柱高度(m)',
          type: 'value',
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        },
        series: this.createSeries(
          [{
            name: '水位值',
            type: 'line',
            animation: true,
            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.valueList
          }], this.holeDepth)
      }
    }
  },
  methods: {
    setWarningLine() {
    },
    updateEchart(data, monitorName, holeDepth) {
      this.charts.clear()
      this.charts.resize()
      this.monitorName = monitorName
      this.holeDepth = holeDepth
      this.valueList = data.realValue;
      this.charts.setOption(this.options)
    },
    createSeries(serverData, holeDepth) {
      const Echarts = require('echarts')
      // 如果没传递drillingDepth参数，就从yAxis中获取
      if (typeof (holeDepth) === 'undefined') {
        holeDepth = 0
      }
      var datalist = []
      for (var i = 0; i < serverData.length; i++) {
        var sss = {
          name: serverData[i].name,
          type: 'line',
          smooth: true,
          symbol: 'none',
          itemStyle: {
            normal: {
              color: '#00f2fd'
            }
          },
          areaStyle: {
            normal: {
              color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0.3, color: '#00f2fd' // 0% 处的颜色
                }, {
                  offset: 0.8, color: '#1c85ff' // 100% 处的颜色
                }, {
                  offset: 1, color: '#0600ff' // 100% 处的颜色
                }]
              )
            }
          },
          data: serverData[i].data,
          markLine: {
            data: [
              {
                symbol: 'none',
                yAxis: holeDepth,
                lineStyle: {
                  color: '#00e6ff',
                  width: 3
                },
                label: {
                  normal: {
                    padding: [-13, -20, 15, -45],
                    position: 'end',
                    formatter: function (data, index) { // 坐标轴文字展示样式处理
                      return '孔深:' + data.value + 'm'
                    },
                  }
                },
              },

              {
                type: 'average',
                lineStyle: {
                  color: 'rgb(111,184,37)',
                  width: 1
                },
                label: {
                  normal: {
                    position: 'insideEndTop',
                    formatter: function (data, index) { // 坐标轴文字展示样式处理
                      return '平均水位:' + data.value + 'm'
                    },
                  }
                },
              },
            ]
          },
        }
        datalist.push(sss)
      }
      return datalist
    }
  },
}
</script>
